<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form :form="form">
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.typeName','类型名称')">
                        <!--字段不显示，用于存储国际化后的组织类型名称-->
                        <a-input
                            v-show="false"
                            v-decorator="['typeName', {rules: [{ required: true, message: this.i18n('form.typeName','类型名称','input') }]}]"
                        />
                        <!--用于显示当前语言的组织类型名称，最终不存入数据库-->
                        <a-input
                            :placeholder="i18n('form.typeName','类型名称','input')"
                            @change= "updateI18nName('typeName')"
                            v-model="typeNameI18">
                            <my-icon slot="addonAfter" type="iconearth-full" @click="editI18nName('typeName')"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.typeCode','类型编码')">
                        <a-input
                            :placeholder="i18n('form.typeCode','类型编码','input')"
                            v-decorator="['typeCode', {rules: [{required: true, validator: this.validTypeCode,message: i18n('engAndNum','类型编码要求英文+数字,英文开头')
                            }]}]"
                        />
                    </a-form-item>
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1"
                                 :label="i18n('form.enabledOrNot','是否启用')">
                        <a-radio-group v-decorator="['enabled',{initialValue:'Y'}]">
                            <a-radio :value="'Y'">{{i18n('isSysMap.yes','是')}}</a-radio>
                            <a-radio :value="'N'">{{i18n('isSysMap.no','否')}}</a-radio>
                        </a-radio-group>
                    </a-form-item>

<!--                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.homeUrl','首页URL')">
                        <a-input :placeholder="i18n('form.homeUrl','首页URL','input')" v-decorator="['homeUrl']"/>
                    </a-form-item>-->
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.descp','描述')">
                        <a-textarea
                            :rows="5"
                            :placeholder="i18n('form.descp','描述','input')"
                            v-decorator="['descp', {rules: [{ required: true, message: this.i18n('form.descp','描述','input') }]}]"
                        />
                    </a-form-item>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import saveOsInstType from '@/api/user/org/osInstType'
    import {BaseForm, RxDialog, RxLayout, Dialog,Util} from "@lowcode/jpaas-common-lib";

    export default {
        name: 'OsInstTypeEdit',
        mixins: [BaseForm],
        components: {
            RxDialog,
            RxLayout
        },
        data() {
            return {
                labelCol: {span: 5},
                wrapperCol: {span: 16},
                i18nDefault:process.env.VUE_APP_LANGUAGE,
                i18nCurrent:"",
                typeNameI18:""//用于显示当前语言的组织类型名称
            }
        },
        created() {
            this.getCurrentI18n();
        },
        methods: {
            onload_(data){
                if (data && data.typeName){
                    this.typeNameI18=this.$i18(data.typeName,"国际化组织");
                }

            },
            i18n(name, text, key) {
                return this.$ti18(name, text, "osInstType", key);
            },
            get(id) {
                return saveOsInstType.get(id);
            },
            save(values) {
                values.isDefault = 'N';
                return saveOsInstType.save(values);
            },
            validTypeCode(rule, value, callback){
                if(value == ""){
                    rule.message = this.i18n('form.typeCode','类型编码','input');
                    return false;
                }
                let reg = new RegExp('^[A-Za-z]+[A-Za-z0-9]*$');
                var flag = reg.test(value);
                return flag;
            },
            getCurrentI18n(){
                this.i18nCurrent= window.localStorage.getItem("language");
                if(!this.i18nCurrent){
                    this.i18nCurrent=this.i18nDefault;
                }

            },
            editI18nName(text) {
                let self_ = this;
                let i18nJson = this.getI18nJson(text)
                let config = {
                    curVm: this,
                    widthHeight: ['800px', '600px'],
                    data: {
                        i18nJson
                    }
                }
                Dialog.openI18nDialog(config, function (action, data) {
                    let obj = {}
                    obj[text] = JSON.stringify(data)
                    self_.form.setFieldsValue(obj);
                    self_.typeNameI18 = self_.$i18(data,"国际化组织");
                });
            },
            updateI18nName(text){
                let i18nJson = this.getI18nJson(text)
                i18nJson[this.i18nCurrent]=this.typeNameI18;
                let obj = {}
                obj[text] = JSON.stringify(i18nJson)
                this.form.setFieldsValue(obj);
            },
            getI18nJson(text){
                let i18nJson={};
                let i18nConf =this.form.getFieldsValue()[text]
                if(i18nConf){
                    if (Util.isJson(i18nConf)){
                        i18nJson=JSON.parse(i18nConf);
                        return i18nJson
                    }
                    i18nJson[this.i18nCurrent]= i18nConf;
                    i18nJson[this.i18nDefault] = i18nConf;
                    return i18nJson
                }
                return {};
            }
        }
    }
</script>
<style scoped>
    .ant-row.ant-form-item:last-child {
        margin-bottom: 0;
    }
</style>